<?php
header('Content-Type: text/html; Charset=UTF-8');

session_start();

require 'lib/db.php';

@$list = dbSelectAll('select id,name,phone,qq from contact');


?>
<!DOCTYPE html>
<html>
   <head>
      <title>便捷通讯录</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
 	  <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/bootstrap-editable.css" rel="stylesheet">
      <link href="css/fileinput.css" rel="stylesheet">
      <script src="js/jquery-1.11.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/jquery.validate.js"></script>
      <script src="js/messages_zh.js"></script>
      <script src="js/additional-methods.js"></script>
      <script src="js/bootstrap-editable.js"></script>
      <script src="js/fileinput.js"></script>
      <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
      <![endif]-->
   </head>
<script type="text/javascript">
$.ajaxSetup({
	dataType:'JSON',
	error:function(){
		alert('链接错误');
	},
});
$(function(){
		$('#loginBtn').click(function(){
			if(($('#loginInput').val().trim()==''||($('#passwordInput').val().trim()==''))){
				alert('密码和登录名都不能为空');
				return;
			};
			$.post('loginbut.php',$('#loginForm').serialize(),function(o){
				if(!o.status){
					alert(o.info);
				}else{
					$('#alter').css('display','block');
					$('#mian').css('display','none');
					$('#addButton').css('display','block');
					$('#loginDialog').css('display','none');
					$('#loginDialog').css('display','none');
					$('#loginLi').css('display','none');
					$('#logoutLi').css('display','block');
				}
			});
	   		});
   		$('#logoutBtn').click(function(){
			$('#messageDialog').css('display','block');
   	   			$('#outBut').click(function(){
					$.post('logoutBtn.php',function(o){
						if(o){
							$('#mian').css('display','block');
							$('#alter').css('display','none');
 							$('#messageDialog').css('display','none');
							$('#loginInput').val('');
 							$('#passwordInput').val('');
							$('#logoutDialog').css('display','none');
							$('#logoutLi').css('display','none');
 							$('#loginLi').css('display','block');
 							$('#addButton').css('display','none');
							}
						});
   	   	   			});
			
   	   		});
	   	$('#addSubmit').click(function(){
	   		if(($('#nameInput').val().trim()==''||($('#mobileInput').val().trim()=='')||$('#qqInput').val().trim()=='')){
				confirm('所有项都必须填写');
				return;
			};
			$.post('addEntryForm.php',$('#addContact').serialize(),function(o){
				if(!o.status){
					confirm(o.info);
					}else{
						location.href='index.php';
						$('#addDialog').css('display','none');
						$('#alter').css('display','block');
						$('#main').css('display','none');
						
						}
				});
		   	});
	   
});
</script>
   <style type="text/css">
   	<?php  if(empty($_SESSION['userId'])){ ?>
	 #logoutLi{display:none;}
	 #addButton{display:none;}
	 #alter{display:none;}
	<?php  }else{ ?>
	 #loginLi{display:none;}
	 #mian{display:none;}
	<?php } ?>
    body{ margin:auto; }
    #mian{background:#bfc2c6;}
    #alter{background:#bfc2c6;}
    .myDialog{ width:400px; margin:100px auto; }
    .flag{ color:#ec8a13;}
    .glyphicon-paperclip{ color:rgb(255,128,0); }
    .warning{ font-weight:bold; }
    .delSpan:hover{ color:blue; text-decoration:underline; }
  </style>
 <body>
 	 	<div class="container">
	   		<nav class="navbar navbar-default">
				<div class="row">
					<div class="col-xs-5">
						<div class="row">
							<div class="col-xs-6">
								<a class="navbar-brand"><span class="flag">便捷通讯录</span>&nbsp;<span class="glyphicon glyphicon-pushpin"></span></a>
							</div>
							<div class="col-xs-6">
								<div class="navbar-form">
								    <div class="btn-group">
    									<button class="btn btn-default">登录</button>
    									<button id="loginNavButton" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    									<ul class="dropdown-menu">
    										<li id="loginLi"><a data-toggle="modal" href="#loginDialog">我要登录</a></li>
    										<li id="logoutLi"><a data-toggle="modal" href="#logoutDialog">退出登录</a></li>
    									</ul>
								    </div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xs-7">
						<div class="navbar-form">
						    <div class="row">
    							<div class="col-xs-5">
    								<div class="input-group">
    									<input id="searchInput" class="form-control" placeholder="搜索联系人" />
    									<div class="input-group-btn">
    										<button id="searchButton" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
    									</div>
    								</div>	
    							</div>
    							<div class="col-xs-7 text-right ">
    								<button id="addButton" class="btn btn-success col-xs-3" data-toggle="modal" data-target="#addDialog">添加联系人</button>
    								<button id="listButton" class="btn btn-primary col-xs-3 col-xs-offset-1">全部联系人</button>
    							</div>
						    </div>
						</div>
					</div>
				</div>
			</nav>
	   	  	<div id="addDialog" class="modal">
	   	  		<div class="myDialog">
	   	  			<div class="modal-content">
	   	  				<div class="modal-header">
	   	  					<button type="button" class="close" data-dismiss="modal">&times;</button>
	   	  					<h4 class="modal-title">添加联系人</h4>
	   	  				</div>
	   	  				<form id="addContact" class="form-horizontal">
		   	  				<div class="modal-body">
		   	  					<div class="form-group">
		   	  						<label class="col-sm-3 hidden-xs control-label" for="nameInput">姓名</label>
		   	  						<div class="col-sm-9">
		   	  							<input id="nameInput" name="name" class="form-control" placeholder="姓名" />
		   	  						</div>
		   	  					</div>
		   	  					<div class="form-group">
		   	  						<label class="col-sm-3 hidden-xs control-label" for="mobileInput">手机</label>
		   	  						<div class="col-sm-9">
		   	  							<input id="mobileInput" name="mobile" type="number" class="form-control" placeholder="手机" />
		   	  						</div>
		   	  					</div>
		   	  					<div class="form-group">
		   	  						<label class="col-sm-3 hidden-xs control-label" for="qqInput">QQ</label>
		   	  						<div class="col-sm-9">
		   	  							<input id="qqInput" name="qq" type="number" class="form-control" placeholder="QQ" />
		   	  						</div>
		   	  					</div>
		   	  				</div>
	   	  				</form>
	   	  				<div class="modal-footer">
	   	  					<button id="addSubmit" class="btn btn-primary btn-sm">添加</button>
	   	  					<button type="button" class="btn btn-success btn-sm" data-dismiss="modal">取消</button>
	   	  				</div>
	   	  			</div>
	   	  		</div>
	   	  	</div>
			<div class="panel panel-default" id="mian">
				<div class="panel-heading">
					<h2 class="panel-title">通讯录　　联系人列表</h2>
				</div>
					<div class="panel-body">
					<table class="table table-bordered text-center">
					    <tr class=success>
					        <td>姓名</td>
					        <td>手机</td>
					        <td>QQ</td>
					    </tr>
					<?php foreach ($list as $val){?>
					<tr>
					 <td class="names<?php echo $val['id'];?>"><?php echo $val['name'];?></td>
					 <td class="phones<?php echo $val['id'];?>"><?php echo $val['phone'];?></td>
					 <td class="qqs<?php echo $val['id'];?>"><?php echo $val['qq'];?></td>
					</tr>
					 <?php }?>
					</table>
				</div>
			</div>
			<div class="panel panel-default" id="alter">
				<div class="panel-heading">
					<h2 class="panel-title">通讯录　　编辑联系人</h2>
				</div>
				<div class="panel-body" id="body1">
					<table class="table table-bordered text-center">
					    <tr class=success>
					        <td>姓名</td>
					        <td>手机</td>
					        <td>QQ</td>
					        <td>处理</td>
					    </tr>
					<?php foreach ($list as $val){?>
					<tr>
					 <td class="name<?php echo $val['id'];?>"><?php echo $val['name'];?></td>
					 <td class="phone<?php echo $val['id'];?>"><?php echo $val['phone'];?></td>
					 <td class="qq<?php echo $val['id'];?>"><?php echo $val['qq'];?></td>
					 <td class="delete"><a data-toggle="modal" href="#delete<?php echo $val['id'];?>">删除</a></td>
					</tr>
					 <?php }?>
					</table>
				</div>
			</div>
			<?php foreach ($list as $val){?>
			 <div class="modal" id="delete<?php  echo  $val['id'];?>">
				 	<div class="modal-dialog">
				 		<div class="modal-content">
				 			<div class="modal-header">
				 				<button type="button" class="close" data-dismiss="modal"></button>
				 			     <h4 class="modal-title">提示!</h4>
				 			</div>
				 			<div class="modal-body">
				 				你确定要删除联系人？[<?php echo $val['name']?>]?
				 			</div>
						<div class="modal-footer">
							 <a class="btn btn-success" id="deleteBtn<?php echo $val['id'];?>" data-dismiss="modal">确定</a>
							 <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
						</div>
				 		</div>
				 	</div>
				 </div>
				 <?php }?>
			<div id="messageDialog" class="modal">
				<div class="myDialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							<h4 class="modal-title">提示！</h4>
						</div>
						<div class="modal-body">你已经安全退出！</div>
						<div class="modal-footer">
							<button id="outBut" class="btn btn-success btn-sm" data-dismiss="modal">知道了！</button>					
						</div>
					</div>
				</div>
			</div>
			<div id="loginDialog" class="modal">
				<div class="myDialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							<h4 class="modal-title">管理员登录</h4>
						</div>
						<form id="loginForm" class="form-horizontal  has-success">
		   	  				<div class="modal-body">
		   	  					<div class="form-group">
		   	  						<label class="col-sm-3 hidden-xs control-label" for="loginInput">登录名</label>
		   	  						<div class="col-sm-8">
		   	  							<div class="input-group">
		   	  								<div class="input-group-addon">
		   	  									<span class="glyphicon glyphicon-user"></span>
		   	  								</div>
			   	  							<input id="loginInput" name="login" class="form-control" placeholder="登录名" />
		   	  							</div>
		   	  						</div>
		   	  					</div>
		   	  					<div class="form-group">
		   	  						<label class="col-sm-3 hidden-xs control-label" for="passwordInput">密　码</label>
		   	  						<div class="col-sm-8">
		   	  							<div class="input-group">
		   	  								<div class="input-group-addon">
		   	  									<span class="glyphicon glyphicon-lock"></span>
		   	  								</div>
			   	  							<input id="passwordInput" name="password" type="password" class="form-control" placeholder="密　码" />
		   	  							</div>
		   	  						</div>
		   	  					</div>
		   	  				</div>
	   	  				</form>
						<div class="modal-footer">
							<button id="loginBtn" class="btn btn-primary btn-sm">登录</button>
	   	  					<button type="button" class="btn btn-success btn-sm" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
			<div id="logoutDialog" class="modal">
				<div class="myDialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">&times;</button>
							<h4 class="modal-title">退出确认</h4>
						</div>
	   	  				<div class="modal-body">
	   	  					 你确定退出登录？
	   	  				</div>
						<div class="modal-footer">
							<button id="logoutBtn" class="btn btn-primary btn-sm" data-dismiss="modal">确定</button>
	   	  					<button type="button" class="btn btn-success btn-sm" data-dismiss="modal">取消</button>
						</div>
					</div>
				</div>
			</div>
		</div>
 <script>
	<?php foreach ($list as $val){?>
	$('.name<?php echo $val['id'];?>').editable({
			type:'text',
			placement:'bottom',
			url:'update.php',
			name:'name',
			pk:<?php echo $val['id'];?>,
		});
	$('.phone<?php echo $val['id'];?>').editable({
			placement:'bottom',
			url:'update.php',
			name:'phone',
			pk:<?php echo $val['id'];?>,
			validate:function(v){
				if(!v.match(/^\d+$/)){
					return '只能是数字';
				}
				return false;
			},
		});
	$('.qq<?php echo $val['id'];?>').editable({
			placement:'bottom',
			url:'update.php',
			name:'qq',
			pk:<?php echo $val['id'];?>,
			validate:function(v){
				if(!v.match(/^\d+$/)){
					return '只能是数字';
				}
				return false;
			},
		});
	$('#deleteBtn<?php echo $val['id'];?>').click(function(){
		$.post('delete.php',{id:<?php echo $val['id'];?>},function(o){
			if(o.status){
				location.href='index.php';
				}else{
				alert('删除失败！');
					}
			return;
			});
	   	});
	<?php }?>
</script>
</body>
</html>
    